@extends('admin::public.base')
<style>
#options{
    display:none;
}
#addType{
    display:none;
    padding: 10px 10px 0px 0px;
}
</style>
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <header class="title">添加配置<button class="layui-btn" onclick="addType()" style="position: absolute;right: 15px;">添加类型</button></header>
        </div>
        <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">配置类型</label>
                    <div class="layui-input-block">
                        <select name="type_id" id="type_id">
                            @foreach ($types as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">配置名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" autocomplete="off" value="" class="layui-input" placeholder="由英文字母和下划线组成，如：web_name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">配置标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="title" autocomplete="off" value="" class="layui-input" placeholder="如：网站名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label layui-required">内容类型</label>
                    <div class="layui-input-block">
                        <select name="value_type" id="value_type" lay-filter="value_type">
                            <option value="text">text</option>
                            <option value="number">number</option>
                            <option value="password">password</option>
                            <option value="textarea">textarea</option>
                            <option value="checkbox">checkbox</option>
                            <option value="radio">radio</option>
                            <option value="select">select</option>
                            <option value="switch">switch</option>
                            <option value="array">array</option>
                            <option value="date">date</option>
                            <option value="time">time</option>
                            <option value="datetime">datetime</option>
                            <option value="image">image</option>
                            <option value="images">images</option>
                            <option value="file">file</option>
                            <option value="ueditor">ueditor</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">配置内容</label>
                    <div class="layui-input-block" id="value">
                        <input type="text" name="value" id="title" autocomplete="off" value="" class="layui-input" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item" id="options">
                    <label for="" class="layui-form-label">配置项</label>
                    <div class="layui-input-block">
                        <textarea name="options" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">配置排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" id="sort" autocomplete="off" value="" class="layui-input" placeholder="倒序排列">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">配置说明</label>
                    <div class="layui-input-block">
                        <textarea name="desc" id="desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit=""  lay-filter="submit">确 认</button>
                        <a href="javascript:history.back(-1)" class="layui-btn layui-btn-primary" >返 回</a>
                    </div>
                </div>
                <div id="addType">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label layui-required">类型名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="typeName" autocomplete="off" value="" class="layui-input" placeholder="请输入类型名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">类型描述</label>
                        <div class="layui-input-block">
                            <textarea id="typeDesc" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="number" id="typeSort" autocomplete="off" value="" class="layui-input" placeholder="倒序排序">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit=""  lay-filter="typeSubmit">确 认</button>
                            <a href="javascript:layer.closeAll()" class="layui-btn layui-btn-primary" >关 闭</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="/static/common/plugins/kindeditor/kindeditor-all.js"></script>
<script src="/static/common/plugins/kindeditor/lang/zh-CN.js"></script>
<script src="/static/common/plugins/jquery/dist/jquery.gridly.js"></script>
    <script>
        layui.use(['layer','form','laydate'],function () {
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;
            var image = "";
            var images = [];
            //新增类型
            window.addType = function(){
                layer.open({
                    type: 1,
                    content: $('#addType'),
                    title: '新增类型',
                    skin:'layui-skin',
                    area: ['450px', '330px'],
                    shade: 0.8,
                });
            }
            form.on('submit(typeSubmit)',function(data){
                var typeName = $('#typeName').val();
                var typeDesc = $('typeDesc').val();
                var typeSort = $('#typeSort').val();
                if(!typeName){
                    layer.msg('请输入类型名称');
                    return false;
                }
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{route('admin.config.typeStore')}}",
                    data: {
                        name : typeName,
                        desc : typeDesc,
                        sort : typeSort
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                layer.closeAll();
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (data) {
                        layer.msg("服务器开小差啦");
                    }
                });
            })
            form.on('select(value_type)', function(data){
                var html = '';
                var options = '';
                $('#options').hide();
                if(data.value=='text'){
                    html += '<input type="text" id="'+data.value+'" name="value" autocomplete="off" value="" class="layui-input" placeholder="">';
                }else if(data.value=='number'){
                    html += '<input type="number" id="'+data.value+'" name="value" autocomplete="off" value="" class="layui-input" placeholder="">';
                }else if(data.value=='password'){
                    html += '<input type="password" id="'+data.value+'" name="value" autocomplete="new-password" value="" class="layui-input" placeholder="">';
                }else if(data.value=='date'){
                    html += '<input type="text" id="'+data.value+'" name="value" autocomplete="new-password" value="" class="layui-input" placeholder="">';
                }else if(data.value=='time'){
                    html += '<input type="text"  id="'+data.value+'" name="value" autocomplete="new-password" value="" class="layui-input" placeholder="">';
                }else if(data.value=='datetime'){
                    html += '<input type="text"  id="'+data.value+'" name="value" autocomplete="new-password" value="" class="layui-input" placeholder="">';
                }else if(data.value=='textarea'){
                    html += '<textarea  id="'+data.value+'" name="value" class="layui-textarea"></textarea>'
                }else if(data.value=='array'){
                    html += '<textarea  id="'+data.value+'" name="value" class="layui-textarea" placeholder="如：[a,b,c]"></textarea>'
                }else if(data.value=='switch'){
                    html += '<input type="checkbox" value="1" lay-text="开启|禁用" id="switch" lay-filter="switch" lay-skin="switch">';
                }else if(data.value=='checkbox'){
                    html += '<input type="text" id="'+data.value+'" name="value" autocomplete="off" value="" class="layui-input" placeholder="填写配置项中的key，多个用逗号隔开，如：1,2,3">';
                    options += '<textarea name="options" class="layui-textarea" placeholder="key:value格式，多个换行填写"></textarea>';
                    $('#options').show();
                    $('#options').find('.layui-input-block').html(options);
                }else if(data.value=='select'||data.value=='radio'){
                    html += '<input type="text" id="'+data.value+'" name="value" autocomplete="off" value="" class="layui-input" placeholder="填写配置项中的key，如：1">';
                    options += '<textarea name="options" class="layui-textarea" placeholder="key:value格式，多个换行填写"></textarea>';
                    $('#options').show();
                    $('#options').find('.layui-input-block').html(options);
                }else if(data.value=="ueditor"){
                    html += '<textarea name="value" id="'+data.value+'" class="layui-textarea"></textarea>';
                }else if(data.value=='image'){
                    html += '<div class="app-image-box"></div><div class="app-btn-file" id="'+data.value+'"><input type="file" accept="image/*" class="app-image" name="image" onchange="imageCallBack(this)"/>';
                    html += '<div class="app-btn-name"><p class="fa fa-folder-open-o"></p><h1>上传图片</h1></div></div>';
                }else if(data.value=='images'){
                    html += '<div class="app-btn-file" id="'+data.value+'"><input type="file" accept="image/*" multiple class="app-image" name="image" onchange="imagesCallBack(this)"/>';
                    html += '<div class="app-btn-name"><p class="fa fa-folder-open-o"></p><h1>上传图片</h1></div></div><div class="app-image-box"></div>';
                }else if(data.value=='file'){
                    layer.msg('暂未开放');
                    return false;
                }
                $('#value').html(html);
                callback(data.value);
            });
            //选择框回调
            function callback(type){
                //时间选择器
                if(type=='date'||type=='time'||type=='datetime'){
                    laydate.render({
                        elem: '#'+type,
                        type: type, //默认，可不填
                        theme: '#108cee',
                        trigger: 'click'
                    });
                }else if(type=='switch'){
                    //监听指定开关
                    form.on('switch(switch)', function(data) {
                        this.value = this.checked ? 2 : 1;
                    });
                    form.render('checkbox');
                }else if(type=='ueditor'){
                    window.editor = KindEditor.create('#ueditor', {
                        height: '300px',
                        width:'100%',
                        themeType: 'default',
                        allowPreviewEmoticons: false,
                        allowImageUpload: true,
                        allowFileManager: true,
                        uploadJson: "{{ route('admin.editorUpload') }}",
                        afterBlur: function(){ this.sync(); },
                        afterUpload: function (url) {
                            this.sync();
                        },
                        items: [
                            'undo', 'redo','|','justifyleft', 'justifycenter', 'justifyright',
                            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','|',
                            'fontname', 'fontsize','forecolor', 'hilitecolor', 'bold',
                            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat','|','image', 'multiimage',
                            'emoticons','link', 'unlink'
                        ]
                    });
                }
            }
            //单图片上传
            window.imageCallBack = function(obj){
                var file = obj.files[0];
                var path = window.uploadBack(file);
                var html = '<img src="'+path+'" title="'+file.name+'" />';
                $(obj).parent().prev('.app-image-box').html(html);
                $(obj).parent().prev('.app-image-box').viewer();
                image = file;
            }
            //多图片上传
            window.imagesCallBack = function(obj){
                var files = obj.files;
                if (files.length > 0) {
                    var html = "";
                    for (var i = 0; i < files.length; i++) {
                        var path = window.uploadBack(files[i]);
                        html += '<div class="box">';
                        html += '<img src="' + path + '" alt="">';
                        html += '<em onclick="delImage(this)" title="删除">×</em>';
                        html += '</div>';
                        files[i].path = path;
                        images.push(files[i]);
                    }
                    $('.app-image-box').append(html);
                    $('.app-image-box').viewer('update');
                    window.gridlyinit();
                }
            }
            //拖拽初始化
            window.gridlyinit = function () {
                $('.app-image-box').gridly({
                    base: 30,
                    gutter: 10,
                    columns: 24,
                    callbacks: {
                        reordered: window.reordered
                    }
                });
            }
            //拖拽回调
            window.reordered = function (data) {
                //先销毁预览事件
                $('.app-image-box').viewer('destroy');
                //隔100ms 防止在拖拽放下那一瞬间 返回的left top不准确
                var verb = [];
                setTimeout(function () {
                    for (var i = 0; i < data.length; i++) {
                        //获取排序后的当前索引为i的div对象
                        var current = data[i];
                        var Class = current.className;
                        if (Class && Class.indexOf('box') > -1) {
                            var path = $(current).find('img').attr('src');
                            for (var j = 0; j < images.length; j++) {
                                if (path == images[j].path) {
                                    verb.push(images[j]);
                                }
                            }
                        }
                    }
                    images = verb;
                    verb = [];
                    $('.app-image-box').viewer();
                }, 100);
            }
            //删除图片
            window.delImage = function (obj) {
                var path = $(obj).parent().find('img').attr('src');
                for (var i = 0; i < images.length; i++) {
                    if (path == images[i].path) {
                        images.splice(i, 1);
                    }
                }
                $(obj).parent().remove();
                $('.app-image-box').viewer('update');
                window.gridlyinit();
            }
            //表单提交
            form.on('submit(submit)', function (data) {
                var formData = new FormData();
                //验证表单
                if (!data.field.name) {
                    layer.tips('请输入配置名称', '#name', { tips: 3 });
                    return false;
                }
                if (!data.field.title) {
                    layer.tips('请输入配置标题', '#title', { tips: 3 });
                    return false;
                }
                if(data.field.value_type=='file'){
                    layer.msg('文件类型暂不支持');
                    return false;
                }
                if(data.field.value_type=='image'&&image){
                    formData.append('image',image);
                }
                if(data.field.value_type=='images'&&images.length>0){
                    for (var i = 0; i < images.length; i++) {
                        formData.append('images[]', images[i]);
                    }
                }
                formData.append('name',data.field.name);
                formData.append('title',data.field.title);
                formData.append('value_type',data.field.value_type);
                formData.append('value',data.field.value);
                formData.append('desc',data.field.desc);
                formData.append('sort',data.field.sort);
                formData.append('options',data.field.options);
                formData.append('type_id',data.field.type_id);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{route('admin.config.store')}}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                location.href = "{{route('admin.config')}}";
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (data) {
                        layer.msg("服务器开小差啦");
                    }
                });
            })
        })
    </script>
@endsection
